feat(database-collections): add storage size details in a tooltip COMPASS-7691 #7519
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds tooltips to the storage size column in both the databases and collections lists, providing detailed breakdowns of storage metrics when users hover over the values.
- Adds interactive tooltips showing storage size details for databases (storage and data size) and collections (storage, used, free, and data size)
- Refactors the storage size rendering logic to use early returns for cleaner code flow
- Includes comprehensive test coverage for the new tooltip functionality
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/databases-collections-list/src/databases.tsx | Implements tooltip with storage and data size breakdown for database storage cells |
| packages/databases-collections-list/src/databases.spec.tsx | Adds test case to verify database storage tooltip rendering and content |
| packages/databases-collections-list/src/collections.tsx | Implements tooltip with detailed storage breakdown (total, used, free, data size) for collection storage cells |
| packages/databases-collections-list/src/collections.spec.tsx | Adds test case to verify collection storage tooltip rendering and content |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <strong>Storage Size:</strong> {compactBytes(storageSize)}{' '} | ||
| (total allocated) |
There was a problem hiding this comment.
The storage size is displayed twice: once in the tooltip trigger (line 149) and again in the tooltip content. Consider removing the redundant display from the tooltip content since users already see this value in the cell, or make it clear why it's repeated.
| <strong>Storage Size:</strong> {compactBytes(storageSize)}{' '} | |
| (total allocated) | |
| <strong>Storage Size:</strong> total allocated space |
| <strong>Storage Size:</strong> {compactBytes(storageSize)}{' '} | ||
| (total allocated) | ||
| </div> | ||
| <div> |
There was a problem hiding this comment.
The storage size is displayed twice: once in the tooltip trigger (line 314) and again in the tooltip content. Consider removing the redundant display from the tooltip content since users already see this value in the cell, or make it clear why it's repeated.
| <strong>Storage Size:</strong> {compactBytes(storageSize)}{' '} | |
| (total allocated) | |
| </div> | |
| <div> |
|
[nit]: can we somehow highlight that this cell has a tooltip? maybe using |
|
Great suggestion @mabaasit, here's how it looks with Databases: 
Collections: 
|
Description
Add storage size details for databases and collections in a tooltip displayed when hovering over the table cell.
Databases
Collections
Checklist
Motivation and Context
Open Questions
Dependents
Types of changes